/**
 * title: Index Page
 * Routes:
 */

import React from 'react';
import { connect } from 'dva';
import { SearchBar, Tabs, WhiteSpace } from 'antd-mobile';
import SelectDbModal from './components/selectDbModal';
import ReportList from './components/reportList';
import styles from './style.less';

const Home = ({ dispatch, home }) => {
  const {
    dashboardList,
    allDashboard,
    sdbVisible,
    reportDatas,
    searchValue,
    currentTabsNum,
  } = home;

  /** 选择 仪表盘显示的接口 */
  const showSdbModal = () => {
    dispatch({
      type: 'home/changeState',
      payload: { sdbVisible: true },
    });
  };
  const hideSdbModal = () => {
    dispatch({
      type: 'home/changeState',
      payload: { sdbVisible: false },
    });
  };
  /** 选择 仪表盘显示的接口 */

  // 搜索
  const onSearch = text => {
    dispatch({
      type: 'home/changeState',
      payload: { searchValue: text },
    });
  };

  // 切换 tabs
  const onTabsChange = (tab, index) => {
    setTimeout(() => {
      dispatch({
        type: 'home/getReportData',
        payload: {
          currentTabsNum: index,
        },
      });
    }, 500);
  };

  // 刷新 所有仪表盘
  const onRefresh = () => {
    dispatch({ type: 'home/loadDbList' });
  };

  return (
    <div className={styles.page}>
      <WhiteSpace size="lg" />
      <div className={styles.header}>
        <div className={styles['search-box']}>
          <SearchBar
            onChange={onSearch}
            placeholder="请输入您的报表名称进行搜索"
            maxLength={30}
            cancelText={' '}
          />
        </div>
      </div>
      <div className={styles.body}>
        <Tabs
          tabs={dashboardList}
          // destroyInactiveTab={true}
          prerenderingSiblingsNumber={1}
          onChange={onTabsChange}
          initialPage={currentTabsNum}
          distanceToChangeTab={0.9}
          swipeable={false} // 是否滑动切换
          renderTabBar={props => {
            return (
              <Tabs.DefaultTabBar
                {...props}
                tabBarBackgroundColor="transparent"
                tabBarInactiveTextColor="#ccc"
                tabBarActiveTextColor="#fff"
                tabBarUnderlineStyle={{
                  // borderColor: '#fff',
                  display: 'none',
                }}
                tabBarTextStyle={{
                  display: 'block',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  lineHeight: '30px',
                }}
                page={3}
              />
            );
          }}
        >
          {(tabData, index) => (
            <ReportList
              dispatch={dispatch}
              data={tabData}
              isActive={currentTabsNum === index}
              reportDatas={reportDatas}
              searchValue={searchValue}
            />
          )}
        </Tabs>
        <div onClick={showSdbModal} className={styles['select-dash-board-btn']} />
      </div>
      <SelectDbModal
        visible={sdbVisible}
        onClose={hideSdbModal}
        allDashboard={allDashboard}
        dispatch={dispatch}
      />
      <div className={styles['fix-btn-group']}>
        <div className={styles['refresh-btn']} onClick={onRefresh} />
      </div>
    </div>
  );
};

export default connect(({ home }) => ({ home }))(Home);
